import React from 'react'
import './index.css'

export default function Footer({todoList,setTodoList}) {
  // console.log(todoList.done);
  //全部完成的数字
  const allFinishHandle =()=>{
      //全部个数，需要用到累加
      //p是初始值，c是数据展开后的每一项
      //如果每一项中的done为treu则P+1
      return todoList.reduce((p,c)=>c.done? p+1 : p , 0)
    }

  //默认全选，就是完成的和全部长度相等且不为0

  //点击全选按钮
 const checkAllHandle =(e)=>{
   //拿到当前点击全选的状态然后修改原数据里所有的done
   const allCheck = todoList.map((item)=>{
    //展开每个对象，然后修改每个done和当前点击的一致
    return {...item , done: e.target.checked}

    })
    setTodoList(allCheck)
 }

  // 点击全部删除
  const deleteAllFinishHandle = ()=>{
    //删除用过滤
      const newTodo = todoList.filter(item=> !item.done )

      setTodoList(newTodo)
  }

  return (
    <div className="todo-footer">
    <label>
      <input type="checkbox" onChange={checkAllHandle} checked = {allFinishHandle() ===todoList.length && todoList.length !==0 } />
    </label>
    <span>
      <span>已完成{allFinishHandle()}</span> / 全部{todoList.length}
    </span>
    <button className="btn btn-danger" onClick={deleteAllFinishHandle}>清除已完成任务</button>
  </div>
  )
}
